<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 
				position与top、left、right、bottom是一起工作的
					top、left、right、bottom的属性属性值可以写负数。相反的效果
					position
						absolute：绝对定位，是从边框线开始
						relative：相对定位，是从本身的位置开始，会依然占领原来的空间，要清楚元素的默认位置
						fixed：固定定位
				z-index：控制z轴
						
			 */
			#d1{
				position: absolute;
				top: 300px;
			}
			#d2{
				position: relative;
				top: 300px;
			}
			#d3{
				/* background-color: blue; */
				position: relative;
				top: -90px;
				/* border-radius: 50px; */
				text-align: center;
				border: 1px solid #089003;
			}
			#d4{
				position: fixed;
				top: 0;
				right: 50%;
			}
			#span1{
				width: 20px;
				height: 20px;
				position: absolute;
				right: -10px;
				top: -10px;
				border-radius: 10px;
				background-color: red;
				line-height: 20px;
				text-align: center;
			}
			.box{
				width: 300px;
				height: 300px;
				position: absolute;
				left: 300px;
			}
			.d{
				width: 100px;
				height: 100px;
				position: absolute;
			}
			#d7{
				top: 0;
				left: 100px;
				background-color: red;
			}
			#d8{
				top: 100px;
				left: 0;
				background-color: green;
			}
			#d9{
				top: 100px;
				left: 100px;
				background-color: purple;
			}
			#d10{
				top: 100px;
				right: 0;
				background-color: yellow;
			}
			#d11{
				bottom: 0;
				left: 100px;
				background-color: deepskyblue;
			}
			
			body{
				height: 1000px;
			}
			#d12{
				width: 100px;
				height: 30px;
				background-color: #00BFFF;
				font-size: 14px;
				text-align: center;
				line-height: 30px;
				position: fixed;
				right: 0;
				text-decoration: none;
				color: #000000;
			}
		</style>
	</head>
	<body id="top">
		<div id="d1" style="background-color: #F17704;width: 100px;height: 100px;">
			
		</div>
		<div id="d2" style="background-color: red;width: 100px;height: 100px;">
			
		</div>
		<div id="d3" style="width: 100px;height: 100px;">
			<span style="font-size: 20px;line-height: 100px;">微信</span>
			<span id="span1">3</span>
		</div>
		<div id="d4" style="background-color: chartreuse;width: 100px;height: 100px;">
			
		</div>
		<div class="box">
			<div id="d7" class="d"></div>
			<div id="d8" class="d"></div>
			<div id="d9" class="d"></div>
			<div id="d10" class="d"></div>
			<div id="d11" class="d"></div>
		</div>
		<a id="d12" href="#top">
			返回顶部
		</a>
		<!-- <a href="javascript:window.scrollTo(0,0)" class="btn" title="回到顶部"></a> -->
	</body>
</html>
